<template>
	<view v-show="info">
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="我的信息"></u-icon>
		</navigator>
		<view class="content">
			<view class="info flex-col justify-around">
				<view class="o flex justify-between">
					<view class="o_o f2">
						我的技能
					</view>
					<view class="o_t f8">
						<span v-for="(i, index) in info.skill_ids">
						    {{ i }}
						    <span v-show="index !== info.skill_ids.length - 1">;</span>
						</span>
					</view>
				</view>
				<view class="o flex justify-between">
					<view class="o_o">
						实名信息
					</view>
					<view class="o_t">
						{{ info.name.charAt(0) + Array(info.name.length).fill('*').join('') }}
					</view>
				</view>
				<view class="o flex justify-between">
					<view class="o_o">
						联系电话
					</view>
					<view class="o_t">
						{{ info.phone.slice(0, 3) + '****' + info.phone.slice(-4) }}
					</view>
				</view>
			</view>
			<view class="idcar">
				<view class="title">
					身份证
				</view>
				
				<view class="car flex-center">
					<image :src="info.id_card_front_image" mode="widthFix"></image>
				</view>
				<view class="car flex-center">
					<image :src="info.id_card_back_image" mode="widthFix"></image>
				</view>
				
			</view>
		</view>
		<image src="@/static/logo.png" mode="widthFix" class="botbg">
		</image>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				sH: '',
				info:''
			};
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.store_information()
		},
		methods:{
			store_information(){
				this.$api.store_information({
					
				}).then(res=>{
					this.info=res.data
				})
			},
			// openChooseImg() {
			// 	uni.chooseImage({
			// 		count: 1, //最多可选择的张数
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
			// 		success: res => {
			// 			console.log(res, '头像res')
			// 			this.imgUrl = res.tempFilePaths[0] //把选择的头像赋值给imgurl
			// 			console.log(this.imgUrl, 'this.imgUrl')
			// 			this.$http.uploadFile(this.imgUrl).then(res => {
			// 				// this.form.images.push(res);
			// 				console.log('aaa',res.url);
			// 				this.imgUrl = res.url 
			// 				this.avar()
			// 			}).finally(() => {
			// 				this.$msg.hideLoading();
			// 			});
			// 		}
			// 	});
			// },
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 115rpx;

		.info {
			padding: 20rpx 0;
			margin: 35px auto;
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.o {
				margin: 16rpx 0;
				padding: 0 24rpx;
				.o_o {
					font-size: 28rpx;
					color: #333A47;
				}

				.o_t {
					text-align: right;
					font-weight: 500;
					font-size: 28rpx;
					color: #00091A;
				}
			}
		}
		.idcar{
			margin: 0 auto;
			width: 686rpx;
			height: 1023rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51,119,255,0.05);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding-top: 32rpx;
			.title{
				font-size: 28rpx;
				color: #333A47;
				margin-left: 24rpx;
			}
			.car{
				width: 638rpx;
				height: 400rpx;
				background: #F7FAFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: 60rpx auto 0 auto;
				color: #cdcdcd;
			}
		}
		
	}

	.botbg {
		position: absolute;
		bottom: 30rpx;
		width: 750rpx;
	}
</style>